
<template>
  <view class="home">

    <!-- <hunk-head name="马上安家" icon="none"></hunk-head> -->
    <div class="home-center"  >
      <div  class="header" >
        <div class="logining-top"  v-if="islogin&&userInfo.usertype == 2 && showLogin == true">
          <div>
            <div class="l1">待收账款（万元）</div>
            <div class="money">{{bossdefaultList.daishoukuanjine}}</div>
            <div class="l2">
              今日{{bossdefaultList.jirijibi}}笔，7日内{{bossdefaultList.qirineijibi}}笔，逾期{{bossdefaultList.yuqijibi}}笔
            </div>
          </div>
          <div>
            <div class="l1">待付账款（万元）</div>
            <div class="money">{{bossdefaultList.daifukuanjine}}</div>
            <div class="l2">
              今日{{bossdefaultList.djirijibi}}笔，7日内{{bossdefaultList.dqirineijibi}}笔，逾期{{bossdefaultList.dyuqijibi}}笔
            </div>
          </div>
        </div>
      <ad v-else-if="userInfo.usertype == 1" unit-id="adunit-4e9f984649e012e2" ad-type="video" ad-theme="white"></ad>

        <div v-if='showLogin==true' :style="{top:userInfo.usertype ==1?'-8px':'-40px'}" :class="['home-toplist', islogin ? 'logining-list' : '']">
          <div class="list" v-for="(item, index) in list" :key="index">
            <div v-if="item.isShow">
              <div class="list-item" @click="clickitem(item)">
                <img :src="item.img" alt="">
                <div>{{item.text}}</div>
              </div>
            </div>
            
          </div>
        </div>
      </div>


      <div :style="{marginTop:userInfo.usertype ==1?'5px':''}" :class="['user-infor',islogin ? 'top27' : '']">
        <div class="user">
          <img :src="userInfo.avatar" alt="">
        </div>
        <div class="center">
          <div class="sc">{{userInfo.unickname}}</div>
          <div style="background:rgba(0, 144, 255, 0.2);font-size:0.9rem;color:#0090FF;text-align:center;border-radius:0.3rem;width:4.5rem;height:1.5rem;
          line-height:1.7
          " v-if="userInfo.rolename">{{userInfo.rolename}}</div>
          <img :src="userInfo.usertype == 2 ? owner:manage" alt="" v-else>
         <!-- v-if="rolename" -->
        </div>
        <div class="right">
          <img @click="showType" :src="userInfo.usertype == 2 ?yezhuduan:rightgly" alt="">
          <div class="rightType" v-if="isshowtype">
            <div class="one" @click="checkType(0)">租客</div>
            <div @click="checkType(6)">{{userInfo.usertype == 2?'管理员':'业主'}}</div>
          </div>
        </div>
      </div>
      <div class="checkBtn" v-if="userInfo.usertype == 1 && !userInfo.enterpriseid ">
        <button class="login" @click="laobanlogin">登陆老板账号</button>
        <button class="join" @click="joinQiye">加入企业</button>
      </div>
      <!-- 今日统计 -->
      <div class="tongji" v-if='isbaojie ==false && showLogin == true'>
        <div class="tj-top">
          <div>今日统计</div>
          <div class="right">
            
          </div>
        </div>
        <div class="tj-content">
          <div class="tj-lits">
            <div>今日入住:</div>
            <div class="num">{{defaultList.ruzhu}}</div>
          </div>
          <div class="tj-lits" style="margin:0 49px">
            <div>今日退房:</div>
            <div class="num">{{defaultList.tuifang}}</div>
          </div>
          <div class="tj-lits">
            <div>今日待收租:</div>
            <div class="num">{{defaultList.daishouzu}}</div>
          </div>
          <div class="tj-lits" style="margin-top:15px">
            <div>7日内待收租:</div>
            <div class="num">{{defaultList.qirishouzu}}</div>
          </div>
          <div class="tj-lits" style="margin:15px 49px 0 49px">
            <div>收租逾期:</div>
            <div class="num">{{defaultList.shouzuyuqi}}</div>
          </div>
        </div>
      </div>
      <!-- 财务 -->
      <div class="tongji caiwu" v-if="userInfo.roleid == '100' && isbaojie ==false && showLogin == true">
        <div class="tj-top">
          <div>财务</div>
          <div class="right">
            
          </div>
        </div>
        <div class="cw-content">
          <div class="cw-list">
            <div class="qian">
              {{defaultList.dangyueshijileiji}}
              <span>.00</span>
            </div>
            <div class="text">当月实际结余</div>
            <div class="text">
              当月实际收入：
              <span>{{defaultList.dangyueshouru}}</span>
            </div>
            <div class="text">
              当月实际支出：
              <span>{{defaultList.dangyueshijizhichu}}</span>
            </div>
          </div>
          <div class="shu"></div>
          <div class="cw-list">
            <div class="qian">
              {{defaultList.dangyueyuqileiji}}
              <span>.00</span>
            </div>
            <div class="text">当月预期结余</div>
            <div class="text">
              当月预期收入：
              <span>{{defaultList.dangyueyuqishouru}}</span>
            </div>
            <div class="text">
              当月预期支出：
              <span>{{defaultList.dangyueyuqizhichu}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 库存 -->
      <div class="tongji kucun" v-if='showLogin == true'>
        <div class="tj-top" v-if=' isbaojie ==false' >
          <div>库存</div>
          <div class="right">
            
          </div>
        </div>
        <div class="kc-content"  v-if=' isbaojie ==false'>
          <div class="kc-lits">
            <div class="list-head">房源</div>
            <div class="list-item">
              <div class="num">{{defaultList.kongzhilv}}%</div>
              <div class="text">空置率</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.quanbu}}</div>
              <div class="text">全部</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.kongzhizhong}}</div>
              <div class="text">空置中</div>
            </div>
          </div>
          <div class="kc-lits">
            <div class="list-head">收房统计</div>
            <div class="list-item">
              <div class="num">{{defaultList.shoufangbenri}}</div>
              <div class="text">本日</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.shoufangbenzhou}}</div>
              <div class="text">本周</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.shoufangbenyue}}</div>
              <div class="text">本月</div>
            </div>
          </div>
          <div class="kc-lits">
            <div class="list-head">出房统计</div>
            <div class="list-item">
              <div class="num">{{defaultList.chufangbenri}}</div>
              <div class="text">本日</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.chufangbenzhou}}</div>
              <div class="text">本周</div>
            </div>
            <div class="list-item">
              <div class="num">{{defaultList.chufangbenyue}}</div>
              <div class="text">本月</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <uni-popup ref="InviteButler" type="center">
      <div class="inviteButler">
        <div class="top">邀请管家</div>
        <div class="erweima">
          <img :src="imgcode" :show-menu-by-longpress="true" alt="" srcset="">
        </div>
        <button class="btn1" type="submit" @click="closePupop">关闭</button>
      </div>
    </uni-popup>
  </view>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
import{GetUserInfo_openid} from '@/apis/user'
import Head from '@componentsMine/head'
import { setToken } from '@utils/auth'
import store from '@store/index'
const owner = imgUrl+'home/owner.png'
const manage = imgUrl+'home/manage.png'
const yezhuduan = imgUrl+'home/yezhuduan.png'
const rightgly = imgUrl+'home/rightgly.png'
import { getDefaultInfo, getBossDefaultInfo } from '@/apis/manageIndex'
import { invitehousekeeper } from '@/apis/public'
import QR from '@utils/wxqrcode'
import {ChangeUserType} from '@/apis/user'
export default {
  data() {
    return {
      owner,manage,yezhuduan,rightgly,
      haveRolename:false, //有rolename
      isbaojie:false,
      showLogin:false,
      listAll: [
          { img: imgUrl+'home/addhouse.png', text: '添加房源' ,isShow: true},
          { img: imgUrl+'home/opendoor.png', text: '带看开门' ,isShow: true},
          { img: imgUrl+'home/ruzhu.png', text: '租客入住' ,isShow: true},
          { img: imgUrl+'home/shouquan.png', text: '延长授权' ,isShow: true},
          { img: imgUrl+'home/caiwu.png', text: '财务详情' ,isShow: true},
          { img: imgUrl+'home/guanjia.png', text: '邀请管家',isShow: true},
          { img: imgUrl+'home/hosting.png', text: '房屋托管',isShow: true},
          { img: imgUrl+'home/share.png', text: '分享推广' ,isShow: true},
          { img: imgUrl+'20220414105916.png', text: '电子合同' ,isShow: false},
        ],
      defaultList: {
        "chufangbenri": 0,
        "chufangbenyue": 0,
        "chufangbenzhou": 0,
        "daishouzu": 0,
        "dangyueshijileiji": 0,
        "dangyueshijizhichu": 0,
        "dangyueshouru": 0,
        "dangyueyuqileiji": 0,
        "dangyueyuqishouru": 0,
        "dangyueyuqizhichu": 0,
        "kongzhilv": 0,
        "kongzhizhong": 0,
        "qirishouzu": 0,
        "quanbu": 0,
        "ruzhu": 0,
        "shoufangbenri": 0,
        "shoufangbenyue": 0,
        "shoufangbenzhou": 0,
        "shouzuyuqi": 0,
        "tuifang": 0,
        "yuefen": 0
      },
      imgcode:'',
      bossdefaultList:{
        "daifukuanjine": 0,
        "daishoukuanjine": 0,
        "djirijibi": 0,
        "dqirineijibi": 0,
        "dyuqijibi": 0,
        "jirijibi": 0,
        "qirineijibi": 0,
        "yuqijibi": 0
      },
      isshowtype: false
    }
  },
  components: {
    'hunk-head': Head
  },
  computed: {
    userInfo(){
      return this.$store.state.baseStore.userInfo
    },
    islogin(){
       let userInfo = this.$store.state.baseStore.userInfo
       if(userInfo.usertype){
         return true
       }else{
         return false
       }
    },
    
    isowner(){
      return this.$store.state.baseStore.isowner
    },
    list(){
      let userInfo = this.$store.state.baseStore.userInfo
      console.log(userInfo.usertype)
      // isShow 为false 不显示
      if(userInfo.usertype == 1&&userInfo.sysuserid){
        this.listAll[8].isShow = true

      }
      if(userInfo.usertype == 2){
        this.listAll[5].isShow = false
        // this.listAll.splice(5,1)
        // return this.listAll
      }else{
        this.listAll[6].isShow = true
        // this.listAll.splice(6,1)
        
      }
      // userInfo.usertype   1管理 2业主
     if(userInfo.usertype == 1){
        if(userInfo.roleid == 100){
        this.listAll[4].isShow = true
      }else{
        this.listAll[4].isShow = false
      }
     }else if(userInfo.usertype == 2){
        this.listAll[4].isShow = true
      }else{
        this.listAll[4].isShow = false
      }
     if(userInfo.roleid == '204'){
       this.listAll[0].isShow = false
       this.listAll[2].isShow = false
       this.listAll[3].isShow = false
       this.listAll[4].isShow = false
       this.listAll[5].isShow = false
       this.listAll[6].isShow = false
       this.listAll[7].isShow = false
       this.listAll[8].isShow = false
       this.isbaojie = true
      
     }
      console.log(8888,this.listAll)
      return this.listAll
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  created(){
    this.getDefaultInfo()
    if(this.islogin){
      this.getBossDefaultInfo()
    }
     if(this.userInfo.usertype ==1 && this.userInfo.enterpriseid == null){
      this.showLogin =false
    }  else{
       this.showLogin =true
    }
  },
  methods: {
    showType(){
      this.isshowtype = !this.isshowtype
    },
    checkType(int){
      if(int == 6){
        int = this.userInfo.usertype == 2 ? '1' : '2'
      }
      let that = this
      // store.commit('baseStore/SET_USERTYPE', int)
      // uni.redirectTo({ url: '/pages/index/index' })
      
      ChangeUserType({userid:that.userInfo.userid,type: int}).then(e=>{
        if(e.code == 200){
            wx.setStorageSync('sysUserInfo',JSON.stringify(e.data))
            setToken(e.data.token)
            store.commit('baseStore/SET_USERINFO', e.data)
            // that.$jump({path: '/pages/index/index'})
            uni.redirectTo({ url: '/pages/index/index' })
          }
      }).catch(e=>{
        console.log(e)
      })
    },
    clickitem(item){
      console.log('点击',item,imgUrl)
      switch (item.text) {
        case "带看开门":
          // uni.showToast({
          //   title: '请填写完整！',
          //   icon: 'error'
          //   // image:'./success.png'
          // })
          uni.redirectTo({ url: '/subPackage/manage/commponents/openDoor',success(res) {
          console.log(res);
          },
          fail(err) {
          // errMsg: "navigateTo:fail page "pages/index/pages/test/test" is not found"
          console.log('err',err);
          } })
          // this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/openDoor'})
          break;
        case "租客入住":
          uni.redirectTo({ url: '/subPackage/manage/commponents/tenant/index' })
          // this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/tenant/index'})
          break;
        case "延长授权":
          uni.redirectTo({ url: '/subPackage/manage/commponents/addauthorize/index' })
          // this.$jump({ type: 'navigateTo', path: '/pages/manage/commponents/addauthorize/index'})uni.redirectTo({ url: '/pages/index/index' })
          break;
        case "财务详情":
          // uni.redirectTo({ url: '/subPackage/manage/commponents/moneydetail/index' })
          this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/moneydetail/index'})
          break;
        case "添加房源":
          uni.redirectTo({ url: '/subPackage/manage/commponents/addhouse/addone' })
          // this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/addhouse/addone'})
          break;
        case "分享推广":
          // uni.redirectTo({ url: '/subPackage/manage/commponents/share/index' })
          this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/share/index'})
          break;
        case "房屋托管":
          uni.redirectTo({ url: '/pages/owner/hosting' })
          // this.$jump({ type: 'navigateTo', path: '/pages/owner/hosting'})
          break;
        case "电子合同":
        // uni.redirectTo({ url: '/subPackage/manage/commponents/contract/index' })
        //跳转到合同页面
        this.$jump({ type: 'navigateTo', path: '/subPackage/manage/commponents/contract/index'})
          break;
        case "邀请管家":
          if(this.userInfo.enterpriseid){
            this.inviteManage()
          }else{
            uni.showToast({
              title: '您未加入企业！',
              icon: 'none'
            })
          }
          
          break;
          
      }
    },
    closePupop(){
      this.$refs.InviteButler.close()
    },
    laobanlogin(){
      // uni.redirectTo({url:'/pages/login/login'})
      this.$jump({ type: 'navigateTo', path: '/pages/login/login'})
    },
    getDefaultInfo(){
      getDefaultInfo({userid: this.userInfo.userid}).then(res=>{
        if(res.code == 200){
          this.defaultList = res.data
        }
      })
    },
    inviteManage(){
      GetUserInfo_openid({openid:wx.getStorageSync('openid')}).then(res=>{
        if(res.code == 200){
           let data = {
              sysdept: res.data.enterpriseid, //企业id
              userid: this.userInfo.userid  //二维码的用户id
            }
            let img = QR.createQrCodeImg(JSON.stringify(data), {
                size: parseInt(300)
            })
            this.imgcode = img
            this.$refs.InviteButler.open()
        }
      })
     
    
    },
    getBossDefaultInfo(){
      getBossDefaultInfo({userid: this.userInfo.userid}).then(res=>{
        if(res.code == 200){
          this.bossdefaultList = res.data
        }
      })
    },
    joinQiye(){
      let that = this
      uni.scanCode({
        success: function (res) {
          console.log('扫码',res)
          that.invitehousekeeper(res.result)
        }
      })
    },
    invitehousekeeper(e){
      let info = JSON.parse(e)
      const data = {
        curuserid: this.userInfo.userid,
        sysdept: info.sysdept,
        userid: info.userid
      }
      invitehousekeeper(data).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title: '邀请成功',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sc{
 white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
}
.home{
  // overflow-y: scroll;
  // overflow-x: hidden;
  width: 100vw;
  // min-height: calc(100vh - 50px);
  // box-sizing: border-box;
  .home-center{
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 10px;
  }
  .header{
    .logining-list{
      position: relative;
      width: 100vw;
      left: -10px;
      top: -38px;
      border-radius: 28px 28px 0px 0px;
    }
    .logining-top{
      position: relative;
      top: -10px;
      left: -10px;
      width: 100vw;
      box-sizing: border-box;
      padding: 0 35px;
      padding-top: 20px;
      height: 153px;
      background: linear-gradient(315deg, #FF9658 0%, #FBAF53 100%);
      display: flex;
      justify-content: space-between;
      .l1{
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
      }
      .money{
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 33px;
      }
      .l2{
        width: 126px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
      }
    }
  }
  .home-toplist{
    // width: 355px;
    height: 165px;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 15px;
    .list-item{
      margin: 15px 10px 0 10px;
      img{
        width: 50px;
        height: 48px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 10px;
        text-align: center;
      }
    }
  }
  .user-infor{
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: #fff;
    .user{
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    .center{
      margin: 0 57px 0 15px;
      div{
        height: 25px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 25px;
      }
      img{
        width: 65px;
        height: 20px;
        margin-top: 10px;
      }
    }
    .right{
      position: relative;
      img{
        width: 111px;
        height: 36px;
      }
      .rightType{
        position: absolute;
        top: 37px;
        right: 0;
        z-index: 100;
        div{
          width: 111px;
          height: 36px;
          background: #FBAF53;
          color: #fff;
          border-radius: 50px;
          text-align: center;
          line-height: 36px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 400;
        }
        .one{
          margin-bottom: 2px; 
        }
      }
    }
  }
  .checkBtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .login{
      width: 172px;
      height: 50px;
      background: #FFAA58;
      border-radius: 4px;
      border: 0;
    }
    .join{
      width: 172px;
      height: 50px;
      background: #0090FF;
      border-radius: 4px;
      border: 0;
    }
    button{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 50px;
    }
    button::after{
      border: 0;
    }
  }
  .tongji{
    background-color: #fff;
    margin: 10px 0;
    .tj-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 46px;
      border-bottom: 2px solid #EFEFEF;
      padding: 0 15px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 46px;
    }
    .tj-content{
      padding: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .tj-lits{
        width: 79px;
        div{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
          line-height: 17px;
        }
        .num{
          margin-top: 6px;
          font-size: 16px;
          color: #000;
        }
      }
    }
  }
  .caiwu .cw-content{
    padding: 15px;
    display: flex;
    justify-content: space-around;
    .shu{
      width: 1px;
      height: 80px;
      background: #EFEFEF;
    }
    .cw-list{
      text-align: center;
      .qian{
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
        span{
          font-size: 12px;
          line-height: 12px;
        }
      }
      .text{
        height: 24px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 24px;
        span{
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
  .kucun .kc-content{
    padding: 0 15px;
    overflow: hidden;
    .kc-lits{
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      .list-head{
        width: 58px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 44px
      }
      .list-item{
        width: 48px;
        text-align: center;
        .num{
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 22px;
        }
        .text{
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
          line-height: 22px;
        }
      }
    }
  }
  .top27{
    margin-top: -28px;
  }
  .inviteButler{
    width: 335px;
    height: 385px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    .top{
      width: 100%;
      height: 54px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 54px;
      text-align: center;
      border-bottom: 1px solid #EFEFEF;
    }
    .erweima{
      width: 202px;
      height: 201px;
      margin: 28px 0 30px 0;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .btn1{
      width: 305px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      border-radius: 100px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 45px;
      text-align: center;
    }
    button::after{
      border: 0;
    }
  }
}
</style>
